<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科学型计算器插件</title>

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/calculator_style.css">
    <!--		在标题栏的左侧显示图标 href:图标地址-->
    <link rel="icon" href="images/logo/favicon.ico" type="image/x-icon">
    <!--		在收藏夹里面显示图标 href:图标地址-->
    <link rel="shortcut icon" href="images/logo/favicon.ico" type="image/x-icon">

</head>

<body style="background-color: #F9F9F9;">
<div id="app">
    <div class="calculator">
        <button @click="changeModeEvent" class="toggle-button">
            <p v-if="changeMode">高级模式 &nbsp; &nbsp; &#9864;</p>
            <p v-else>基本模式 &nbsp; &nbsp; &#9862;</p>
        </button>
        <div class="results">
            <input class="input" v-model="current" />
        </div>
        <div class="mode" v-if="changeMode">
            <button class="button" @click="press">7</button>
            <button class="button" @click="press">8</button>
            <button class="button" @click="press">9</button>
            <button class="button" @click="press">*</button>
            <button class="button" @click="press">&#60;=</button>
            <button class="button" @click="press">C</button>
            <button class="button" @click="press">4</button>
            <button class="button" @click="press($event)">5</button>
            <button class="button" @click="press">6</button>
            <button class="button" @click="press">/</button>
            <button class="button" @click="press">(</button>
            <button class="button" @click="press">)</button>
            <button class="button" @click="press">1</button>
            <button class="button" @click="press">2</button>
            <button class="button" @click="press">3</button>
            <button class="button" @click="press">-</button>
            <button class="button" @click="press">x ²</button>
            <button class="button" @click="press">±</button>
            <button class="button" @click="press">0</button>
            <button class="button" @click="press">.</button>
            <button class="button" @click="press">%</button>
            <button class="button" @click="press">+</button>
            <button class="button equal-sign" @click="press">=</button>
        </div>
        <div class="mode" v-else>
            <button class="button" @click="press">sin</button>
            <button class="button" @click="press">cos</button>
            <button class="button" @click="press">tan</button>
            <button class="button" @click="press">x^</button>
            <button class="button" @click="press">&#60;=</button>
            <button class="button" @click="press">C</button>
            <button class="button" @click="press">log</button>
            <button class="button" @click="press">ln</button>
            <button class="button" @click="press">e</button>
            <button class="button" @click="press">∘</button>
            <button class="button" @click="press">rad</button>
            <button class="button" @click="press">√</button>
            <button class="button" @click="press">7</button>
            <button class="button" @click="press">8   </button>
            <button class="button" @click="press">9</button>
            <button class="button" @click="press">/</button>
            <button class="button" @click="press">x ²</button>
            <button class="button" @click="press">x !</button>
            <button class="button" @click="press">4</button>
            <button class="button" @click="press">5</button>
            <button class="button" @click="press">6</button>
            <button class="button" @click="press">*</button>
            <button class="button" @click="press">(</button>
            <button class="button" @click="press">)</button>
            <button class="button" @click="press">1</button>
            <button class="button" @click="press">2</button>
            <button class="button" @click="press">3</button>
            <button class="button" @click="press">-</button>
            <button class="button" @click="press">%</button>
            <button class="button" @click="press">±</button>
            <button class="button" @click="press">0</button>
            <button class="button" @click="press">.</button>
            <button class="button" @click="press">&#x003C0;</button>
            <button class="button" @click="press">+</button>
            <button class="button equal-sign" @click="press">=</button>
        </div>
    </div>
</div>

<script src='js/vue.min.js'></script>

<script  src="js/index.js"></script>

</body>
</html>
